<template>
  <div class="containerDiv">
    <div class="treeDiv">
      <el-tree
        node-key="id"
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        draggable
        @node-drag-start="handleDragStart"
        :allow-drag="allowDrag"
        :allow-drop="allowDrop"
        :render-content="renderContent"
      ></el-tree>
    </div>
    <div class="bodyMain">
      <div
        class="bodyHeader"
        v-bind:style="{
          width: showDivWidth,
          'padding-left': showDivPaddingLeft,
        }"
      >
        <div style="float: left">
          <el-button :class="chooseSplitButtonClass(1)" @click="setSplit(1)"
            >单分屏</el-button
          >
          <el-button :class="chooseSplitButtonClass(4)" @click="setSplit(4)"
            >4分屏</el-button
          >
          <el-button :class="chooseSplitButtonClass(9)" @click="setSplit(9)"
            >9分屏</el-button
          >
          <el-button :class="chooseSplitButtonClass(16)" @click="setSplit(16)"
            >16分屏</el-button
          >
        </div>
        <div style="float: right">
          <el-button class="fullscreenButton" @click="fullScreen()"
            ><i class="el-icon-fullscreen"></i>全屏观看</el-button
          >
        </div>
      </div>
      <div
        v-bind:style="{
          width: showDivWidth,
          height: showDivHeight,
          'padding-top': showDivPaddingTop,
          'padding-left': showDivPaddingLeft,
        }"
      >
        <div
          id="split1Div"
          style="width: 100%; height: 100%"
          v-if="this.splitMode == 1"
        >
          <div class="split1_row">
            <div
              class="split1_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 0)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar1_0"
                style="display: none"
              >
                <span class="splitName">{{ split1Names[0] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(0)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(0)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement1_0"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
        </div>
        <div
          id="split4Div"
          style="width: 100%; height: 100%"
          v-if="this.splitMode == 4"
        >
          <div class="split4_row">
            <div
              class="split4_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 0)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar4_0"
                style="display: none"
              >
                <span class="splitName">{{ split4Names[0] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(0)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(0)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement4_0"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split4_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 1)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar4_1"
                style="display: none"
              >
                <span class="splitName">{{ split4Names[1] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(1)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(1)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement4_1"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
          <div class="split4_row">
            <div
              class="split4_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 2)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar4_2"
                style="display: none"
              >
                <span class="splitName">{{ split4Names[2] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(2)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(2)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement4_2"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split4_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 3)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar4_3"
                style="display: none"
              >
                <span class="splitName">{{ split4Names[3] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(3)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(3)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement4_3"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
        </div>
        <div
          id="split9Div"
          style="width: 100%; height: 100%"
          v-if="this.splitMode == 9"
        >
          <div class="split9_row">
            <div
              class="split9_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 0)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_0"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[0] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(0)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(0)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_0"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split9_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 1)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_1"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[1] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(1)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(1)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_1"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split9_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 2)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_2"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[2] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(2)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(2)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_2"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
          <div class="split9_row">
            <div
              class="split9_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 3)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_3"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[3] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(3)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(3)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_3"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split9_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 4)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_4"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[4] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(4)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(4)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_4"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split9_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 5)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_5"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[5] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(5)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(5)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_5"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
          <div class="split9_row">
            <div
              class="split9_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 6)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_6"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[6] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(6)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(6)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_6"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split9_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 7)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_7"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[7] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(7)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(7)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_7"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split9_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 8)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar9_8"
                style="display: none"
              >
                <span class="splitName">{{ split9Names[8] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(8)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(8)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement9_8"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
        </div>
        <div
          id="split16Div"
          style="width: 100%; height: 100%"
          v-if="this.splitMode == 16"
        >
          <div class="split16_row">
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 0)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_0"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[0] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(0)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(0)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_0"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 1)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_1"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[1] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(1)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(1)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_1"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 2)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_2"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[2] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(2)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(2)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_2"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 3)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_3"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[3] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(3)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(3)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_3"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
          <div class="split16_row">
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 4)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_4"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[4] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(4)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(4)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_4"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 5)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_5"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[5] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(5)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(5)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement4_5"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 6)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_6"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[6] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(6)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(6)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement4_6"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 7)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_7"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[7] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(7)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(7)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_7"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
          <div class="split16_row">
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 8)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_8"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[8] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(8)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(8)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_8"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 9)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_9"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[9] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(9)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(9)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_9"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 10)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_10"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[10] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(10)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(10)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_10"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 11)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_11"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[11] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(11)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(11)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_11"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
          <div class="split16_row">
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 12)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_12"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[12] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(12)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(12)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_12"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 13)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_13"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[13] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(13)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(13)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_13"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_dark"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 14)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_14"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[14] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(14)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(14)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_14"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
            <div
              class="split16_cell_light"
              @dragenter="handleTargetDragEnter"
              @drop="handleTargetDrop($event, 15)"
              @dragover="handleTargetDragOver"
            >
              <div
                class="cellToolbar"
                id="cellToolbar16_15"
                style="display: none"
              >
                <span class="splitName">{{ split16Names[15] }}</span>
                <div style="float: right">
                  <div
                    @click="rmSpecifyPlayer(15)"
                    class="removePlayerDiv"
                  ></div>
                  <div @click="maxPlayer(15)" class="maxPlayerDiv"></div>
                </div>
              </div>
              <video
                id="videoFlvElement16_15"
                controls
                preload="auto"
                autoplay
                width="100%"
                height="100%"
              >
                Your browser is too old which doesn't support HTML5 video.
              </video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import flvjs from '../assets/js/flv.min.js'
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      splitMode: 0,
      subscreen: Array(16).fill(-1),
      showDivWidth: '0px',
      showDivHeight: '0px',
      showDivPaddingTop: '0px',
      showDivPaddingLeft: '0px',
      split1Players: Array(1).fill(null),
      split4Players: Array(4).fill(null),
      split9Players: Array(9).fill(null),
      split16Players: Array(16).fill(null),
      split1Names: Array(1).fill(''),
      split4Names: Array(4).fill(''),
      split9Names: Array(9).fill(''),
      split16Names: Array(16).fill(''),
      split1ElementIds: ['videoFlvElement1_0'],
      split4ElementIds: [
        'videoFlvElement4_0',
        'videoFlvElement4_1',
        'videoFlvElement4_2',
        'videoFlvElement4_3',
      ],
      split9ElementIds: [
        'videoFlvElement9_0',
        'videoFlvElement9_1',
        'videoFlvElement9_2',
        'videoFlvElement9_3',
        'videoFlvElement9_4',
        'videoFlvElement9_5',
        'videoFlvElement9_6',
        'videoFlvElement9_7',
        'videoFlvElement9_8',
      ],
      split16ElementIds: [
        'videoFlvElement16_0',
        'videoFlvElement16_1',
        'videoFlvElement16_2',
        'videoFlvElement16_3',
        'videoFlvElement16_4',
        'videoFlvElement16_5',
        'videoFlvElement16_6',
        'videoFlvElement16_7',
        'videoFlvElement16_8',
        'videoFlvElement16_9',
        'videoFlvElement16_10',
        'videoFlvElement16_11',
        'videoFlvElement16_12',
        'videoFlvElement16_13',
        'videoFlvElement16_14',
        'videoFlvElement16_15',
      ],
      split1CellToolbarIds: ['cellToolbar1_0'],
      split4CellToolbarIds: [
        'cellToolbar4_0',
        'cellToolbar4_1',
        'cellToolbar4_2',
        'cellToolbar4_3',
      ],
      split9CellToolbarIds: [
        'cellToolbar9_0',
        'cellToolbar9_1',
        'cellToolbar9_2',
        'cellToolbar9_3',
        'cellToolbar9_4',
        'cellToolbar9_5',
        'cellToolbar9_6',
        'cellToolbar9_7',
        'cellToolbar9_8',
      ],
      split16CellToolbarIds: [
        'cellToolbar16_0',
        'cellToolbar16_1',
        'cellToolbar16_2',
        'cellToolbar16_3',
        'cellToolbar16_4',
        'cellToolbar16_5',
        'cellToolbar16_6',
        'cellToolbar16_7',
        'cellToolbar16_8',
        'cellToolbar16_9',
        'cellToolbar16_10',
        'cellToolbar16_11',
        'cellToolbar16_12',
        'cellToolbar16_13',
        'cellToolbar16_14',
        'cellToolbar16_15',
      ],
      httpflvUrlMap: new Map(),
      deviceNameMap: new Map(),
    }
  },
  created() {
    this.getCameras()
    this.getDevices()
    this.resizeShowDiv()
    setTimeout(() => {
      this.getStage()
    }, 100)
  },
  computed: {},
  mounted() {
    const that = this
    window.onresize = () => {
      this.resizeShowDiv()
    }
  },
  methods: {
    allowDrop(draggingNode, dropNode, type) {
      return false
    },
    allowDrag(draggingNode) {
      return true
    },
    handleDragStart(node, ev) {
      let dt = ev.dataTransfer
      ev.dataTransfer.effectAllowed = 'move'
      dt.setData('text/plain', JSON.stringify(node.data))
    },
    handleTargetDragEnter(e) {
      e.preventDefault()
    },
    handleTargetDragOver(e) {
      e.preventDefault()
    },
    handleTargetDrop(e, index) {
      let data = e.dataTransfer
      let content = JSON.parse(data.getData('text/plain'))

      e.preventDefault()
      //通常不需要阻止冒泡，但是当出现容器嵌套时最好这么做
      //它可以防止节点被添加到数组中两次
      e.stopPropagation()

      this.setStageSubscreen(index, content.device_id)

      setTimeout(() => {
        this.subscreen[index] = content.device_id
        var url = this.httpflvUrlMap.get(this.subscreen[index])
        var name = this.deviceNameMap.get(this.subscreen[index])
        if (this.splitMode == 1) {
          this.$set(this.split1Names, index, name)
          this.split1Players[index] = this.startPlayer(
            this.split1ElementIds[index],
            url,
            this.split1CellToolbarIds[index]
          )
        } else if (this.splitMode == 4) {
          this.$set(this.split4Names, index, name)
          this.split4Players[index] = this.startPlayer(
            this.split4ElementIds[index],
            url,
            this.split4CellToolbarIds[index]
          )
        } else if (this.splitMode == 9) {
          this.$set(this.split9Names, index, name)
          this.split9Players[index] = this.startPlayer(
            this.split9ElementIds[index],
            url,
            this.split9CellToolbarIds[index]
          )
        } else if (this.splitMode == 16) {
          this.$set(this.split16Names, index, name)
          this.split16Players[index] = this.startPlayer(
            this.split16ElementIds[index],
            url,
            this.split16CellToolbarIds[index]
          )
        }
      }, 100)
    },
    renderContent(h, { node, data, store }) {
      return (
        <span>
          <i class={data.icon}></i>
          <span> {node.label}</span>
        </span>
      )
    },
    chooseSplitButtonClass(attrSplitMode) {
      if (attrSplitMode == this.splitMode) {
        return 'splitSelectedButton'
      }
      return 'splitButton'
    },
    formatUrl(oldUrl) {
      var reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
      var ip = reg.exec(window.location.href)[0]
      ip = '10.4.26.2'
      let newUrl = oldUrl.replace('127.0.0.1', ip)
      return newUrl
    },
    fullScreen() {
      var elementId = 'split1Div'
      if (this.splitMode == 1) {
        elementId = 'split1Div'
      } else if (this.splitMode == 4) {
        elementId = 'split4Div'
      } else if (this.splitMode == 9) {
        elementId = 'split9Div'
      } else if (this.splitMode == 16) {
        elementId = 'split16Div'
      }
      var ele = document.getElementById(elementId)
      if (ele.requestFullscreen) {
        ele.requestFullscreen()
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen()
      } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen()
      }
    },
    maxPlayer(index) {
      var elementId = this.split1ElementIds[index]
      if (this.splitMode == 1) {
        elementId = this.split1ElementIds[index]
      } else if (this.splitMode == 4) {
        elementId = this.split4ElementIds[index]
      } else if (this.splitMode == 9) {
        elementId = this.split9ElementIds[index]
      } else if (this.splitMode == 16) {
        elementId = this.split16ElementIds[index]
      }
      var ele = document.getElementById(elementId)
      if (ele.requestFullscreen) {
        ele.requestFullscreen()
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen()
      } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen()
      }
    },
    rmSpecifyPlayer(index) {
      if (this.subscreen[index] != -1) {
        if (this.splitMode == 1) {
          this.stopPlayer(
            this.split1Players[index],
            this.split1CellToolbarIds[index]
          )
        } else if (this.splitMode == 4) {
          this.stopPlayer(
            this.split4Players[index],
            this.split4CellToolbarIds[index]
          )
        } else if (this.splitMode == 9) {
          this.stopPlayer(
            this.split9Players[index],
            this.split9CellToolbarIds[index]
          )
        } else if (this.splitMode == 16) {
          this.stopPlayer(
            this.split16Players[index],
            this.split16CellToolbarIds[index]
          )
        }
      }
      this.setStageSubscreen(index, -1)
    },
    async getCameras() {
      const { data: res } = await this.$http.get('query_cameras', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      if (res.code == '1000') {
        res.data.forEach((row) => {
          let liveUrl = this.formatUrl(row.live)
          this.httpflvUrlMap.set(row.device_id, liveUrl)
          this.deviceNameMap.set(row.device_id, row.name)
        })
      }
    },
    async getDevices() {
      const { data: res } = await this.$http.get('query_devices', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      if (res.code == '1000') {
        this.treeData = res.data
      }
    },
    async setSplit(splitMode) {
      this.stopBatchPlayer()
      this.splitMode = splitMode
      this.setStageSplit()
      setTimeout(() => {
        this.getStage()
      }, 100)
    },
    async setStageSplit() {
      const { data: res } = await this.$http.put(
        'set_stage_split',
        { split: this.splitMode },
        {
          params: {
            token: window.sessionStorage.getItem('token'),
          },
        }
      )
      if (res.code == '1000') {
      }
    },
    async setStageSubscreen(position, deviceId) {
      this.subscreen[position] = deviceId
      const { data: res } = await this.$http.put(
        'set_stage_subscreen',
        { pos: position, device_id: deviceId },
        {
          params: {
            token: window.sessionStorage.getItem('token'),
          },
        }
      )
      if (res.code == '1000') {
      }
    },
    async getStage() {
      const { data: res } = await this.$http.get('query_stage', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      if (res.code == '1000') {
        this.splitMode = res.data.split
        this.subscreen = res.data.subscreen
        setTimeout(() => {
          this.startBatchPlayer()
        }, 100)
      }
    },
    startBatchPlayer() {
      for (let index = 0; index < this.splitMode; index++) {
        if (this.subscreen[index] != -1) {
          var url = this.httpflvUrlMap.get(this.subscreen[index])
          var name = this.deviceNameMap.get(this.subscreen[index])
          if (this.splitMode == 1) {
            this.$set(this.split1Names, index, name)
            this.split1Players[index] = this.startPlayer(
              this.split1ElementIds[index],
              url,
              this.split1CellToolbarIds[index]
            )
          } else if (this.splitMode == 4) {
            this.$set(this.split4Names, index, name)
            this.split4Players[index] = this.startPlayer(
              this.split4ElementIds[index],
              url,
              this.split4CellToolbarIds[index]
            )
          } else if (this.splitMode == 9) {
            this.$set(this.split9Names, index, name)
            this.split9Players[index] = this.startPlayer(
              this.split9ElementIds[index],
              url,
              this.split9CellToolbarIds[index]
            )
          } else if (this.splitMode == 16) {
            this.$set(this.split16Names, index, name)
            this.split16Players[index] = this.startPlayer(
              this.split16ElementIds[index],
              url,
              this.split16CellToolbarIds[index]
            )
          }
        }
      }
    },
    stopBatchPlayer() {
      for (let index = 0; index < this.splitMode; index++) {
        if (this.subscreen[index] != -1) {
          if (this.splitMode == 1) {
            this.stopPlayer(
              this.split1Players[index],
              this.split1CellToolbarIds[index]
            )
          } else if (this.splitMode == 4) {
            this.stopPlayer(
              this.split4Players[index],
              this.split4CellToolbarIds[index]
            )
          } else if (this.splitMode == 9) {
            this.stopPlayer(
              this.split9Players[index],
              this.split9CellToolbarIds[index]
            )
          } else if (this.splitMode == 16) {
            this.stopPlayer(
              this.split16Players[index],
              this.split16CellToolbarIds[index]
            )
          }
        }
      }
    },
    startPlayer(elementId, httpflvUrl, toolbarId) {
      document.getElementById(toolbarId).style.display = 'block'
      let player = null
      var playerElement = document.getElementById(elementId)
      if (flvjs.isSupported()) {
        player = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: httpflvUrl,
        })
        player.attachMediaElement(playerElement)
        player.load()
      }
      return player
    },
    stopPlayer(player, toolbarId) {
      document.getElementById(toolbarId).style.display = 'none'
      if (flvjs.isSupported()) {
        if (player != null) {
          player.unload()
          player.detachMediaElement()
          player.destroy()
          player = null
        }
      }
    },
    async resizeShowDiv() {
      let oldWidth = document.body.clientWidth - 260 - 6 * 2
      let oldHeight = document.body.clientHeight - 60 - 48 - 6 * 2
      let newWidth = 0
      let newHeight = 0
      let paddingTop = 6
      let paddingLeft = 6
      if (oldWidth / oldHeight >= 1.78) {
        newWidth = oldHeight * 1.78
        newHeight = oldHeight
        paddingLeft = (oldWidth - newWidth) / 2 + 6
      } else {
        newWidth = oldWidth
        newHeight = (oldWidth * 9) / 16
        paddingTop = (oldHeight - newHeight) / 2 + 6
      }
      this.showDivWidth = newWidth + 'px'
      this.showDivHeight = newHeight + 'px'
      this.showDivPaddingTop = paddingTop + 'px'
      this.showDivPaddingLeft = paddingLeft + 'px'
    },
  },
}
</script>
<style lang="less" scoped>
.containerDiv {
  display: flex;
  height: 100%;
  background: #201f1f;
}
.bodyMain {
  width: auto;
  height: 100%;
  float: left;
}
.bodyHeader {
  display: flex;
  min-height: 40px;
  max-height: 40px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
}
.treeDiv {
  width: 260px;
  height: 100%;
  float: left;
  background: #1a1919;
}
.split1_row {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0 auto;
}
.split1_cell_light {
  width: 100%;
  height: 100%;
  background-color: #1a1919;
  background-image: url(../assets/VMediaX01.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.split4_row {
  width: 100%;
  height: 50%;
  display: flex;
  margin: 0 auto;
}
.split4_cell_light {
  width: 50%;
  height: 100%;
  background-color: #1a1919;
  background-image: url(../assets/VMediaX01.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.split4_cell_dark {
  width: 50%;
  height: 100%;
  background-color: #151414;
  background-image: url(../assets/VMediaX01.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.split9_row {
  width: 100%;
  height: 33.33%;
  display: flex;
  margin: 0 auto;
}
.split9_cell_light {
  width: 33.33%;
  height: 100%;
  background-color: #1a1919;
  background-image: url(../assets/VMediaX02.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.split9_cell_dark {
  width: 33.33%;
  height: 100%;
  background-color: #151414;
  background-image: url(../assets/VMediaX02.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.split16_row {
  width: 100%;
  height: 25%;
  display: flex;
  margin: 0 auto;
}
.split16_cell_light {
  width: 25%;
  height: 100%;
  background-color: #1a1919;
  background-image: url(../assets/VMediaX03.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.split16_cell_dark {
  width: 25%;
  height: 100%;
  background-color: #151414;
  background-image: url(../assets/VMediaX03.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.subHeader {
  display: flex;
  height: 40px;
  // line-height: 60px;
  align-items: center;
  justify-content: space-between;
  font-size: 6px;
  border-bottom: 1px solid #e3e4e8;
}
.subTitle {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #414141;
  margin-left: 20px;
}

.infoText {
  font-size: 14px;
  font-weight: 400;
  color: #414141;
  display: flex;
}
.infoText span {
  text-align: left;
  height: 30px;
}
.infoText span:first-child {
  margin-left: 30px;
  width: 80px;
  font-size: 14px;
}
/deep/ .splitButton {
  width: 80px;
  height: 32px;
  color: #999999;
  font-size: 14px;
  background: #1a1919;
  border: 1px solid #404040;
  border-radius: 3px;
  padding: 8px;
}
.splitButton:focus,
.splitButton:hover {
  color: #cccccc;
  background: #3d3d3d;
  border: 1px solid #717070;
  border-radius: 3px;
  padding: 8px;
}
/deep/ .splitSelectedButton {
  width: 80px;
  height: 32px;
  font-size: 14px;
  color: #cccccc;
  background: #3d3d3d;
  border: 1px solid #717070;
  border-radius: 3px;
  padding: 8px;
}
.splitSelectedButton:focus,
.splitSelectedButton:hover {
  color: #cccccc;
  background: #3d3d3d;
  border: 1px solid #717070;
  border-radius: 3px;
  padding: 8px;
}
/deep/ .fullscreenButton {
  width: 94px;
  height: 32px;
  color: #999999;
  font-size: 14px;
  background: #1a1919;
  border: 1px solid #404040;
  border-radius: 3px;
  padding: 8px;
  float: right;
}
.fullscreenButton:focus,
.fullscreenButton:hover {
  color: #cccccc;
  background: #3d3d3d;
  border: 1px solid #717070;
  border-radius: 3px;
  padding: 8px;
}
.centered_video {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}
.cellToolbar {
  width: 100%;
  bottom: -1px;
  right: 0px;
  position: absolute;
  background: rgba(21, 20, 20, 0.5);
}
video::-webkit-media-controls {
  object-fit: fill;
  display: none !important;
}
video {
  object-fit: fill;
}

/* 设置树形最外层的背景颜色和字体颜色 */
.el-tree {
  color: #b8b8b8;
  font-size: 16px;
  background: transparent;
}
/* 树节点鼠标悬浮式改变背景色，字体颜色 */
/deep/ .el-tree-node__content:hover {
  background-color: #3acaff;
  color: #434647;
}
/* 改变被点击节点背景颜色，字体颜色 */
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #3acaff;
  color: #434647;
}
/* 改变节点高度 */
/deep/ .el-tree-node__content {
  height: 36px !important;
}
.maxPlayerDiv {
  margin: 6px;
  width: 16px;
  height: 16px;
  background-image: url(../assets/maxPlayer.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  float: right;
  cursor: pointer;
}
.removePlayerDiv {
  margin: 6px;
  width: 16px;
  height: 16px;
  background-image: url(../assets/stopPlayer.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  float: right;
  cursor: pointer;
}
.el-icon-fullscreen {
  background: url('../assets/maxPlayer.png') center no-repeat;
  background-size: cover;
  margin-right: 3px;
}
.el-icon-fullscreen:before {
  content: '\66ff';
  font-size: 16px;
  visibility: hidden;
}
.el-icon-fullscreen {
  font-size: 16px;
}
.el-icon-fullscreen:before {
  content: '\e641';
}
.splitName {
  float: left;
  margin-top: 4px;
  margin-left: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #edecec;
}
</style>
